@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@font-face {
font-family: 'Aubrey Pro';
    src: url('/fileservice/file/download/h/0a6177d749f81dd8c7a0af5bbfd2e7b3.otf/a/914160/sc/341') format('opentype')
 }

body {
    /* шрифт */
   font-family: 'Montserrat', sans-serif;!important; 
   background: #eaecf3; 
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Aubrey Pro'!important; 
}

.gc-account-leftbar {
    background:#0c3c2f;
    border-radius: 30px 0px 0px 30px;
}

.gc-account-leftbar .gc-account-user-menu {
    background: transparent;
}

/* Левая панель - убираем разделители между иконками-разделами */
.gc-account-leftbar .gc-account-user-menu li {
    border-bottom: none;
}
/* Иконка профиля - аватар */
.menu-item-profile .menu-item-icon {
    border-radius: 30px 8px 8px 8px;
    width: 62px;
    border: 3px solid #a6a19e;
    background: #ffffff;
    display: block;
    position: absolute;
    top: 8%;
    left: 11px;
}

.gc-account-leftbar .gc-account-user-submenu-bar li.menu-item-help a {
border-top: none;
}

/* Раздел с иконкой профиля (ссылка) */
li.menu-item.menu-item-profile a {
    background: transparent!important;
    border: transparent!important;
    transition: all 0.3s;
}

.menu-item-profile .menu-item-icon:hover {
   background: #facc53;
   border: 3px solid #dfa53b;
}

/*  Левая панель - размеры разделов с иконками */
li.menu-item.menu-item-cms a,
li.menu-item.menu-item-teach a,
li.menu-item.menu-item-user a,
li.menu-item.menu-item-tasks a,
li.menu-item.menu-item-notifications a,
li.menu-item.menu-item-sales a,
li.menu-item.menu-item-chatium a {
    display: block;
    position: relative;
    background: #ffffff;
    margin: 15px auto 20px;
    width: 62px;
    height: 62px;
    border-radius: 8px;
    border: 3px solid #a6a19e;
    transition: all 0.3s;
}

li.menu-item.menu-item-notifications_button_small a {
    display: block;
    position: relative;
    background: #ffffff;
    margin: 20px auto 20px;
    width: 62px;
    height: 62px;
    border-radius: 8px;
    border: 3px solid #a6a19e;
    transition: all 0.3s;
}

/* выделим фон разделов под иконки при наведении */
.gc-account-leftbar .gc-account-user-menu li:hover a,
.gc-account-leftbar .gc-account-user-menu li.active a, 
.gc-account-leftbar .gc-account-user-menu li.selected a {
   background: #facc53;
   border: 3px solid #dfa53b;
}

.gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small a {
   height: 62px!important;
}

.gc-account-user-menu li.menu-item-marathon {
    display: none;
}

/* Разделы с иконками - скрываем системные иконки Меню */
li.menu-item-notifications_button_small a img,
li.menu-item-cms a img,
li.menu-item-teach a img,
li.menu-item-user a img,
li.menu-item-tasks a img,
li.menu-item-notifications a img,
li.menu-item-sales a img,
li.menu-item-chatium a img {
    display: none;
}

/* Разделы с иконками - новые иконки через псевдоэлемент */
li.menu-item-notifications_button_small a::before,
li.menu-item.menu-item-cms a::before,
li.menu-item.menu-item-teach a::before,
li.menu-item.menu-item-user a::before,
li.menu-item.menu-item-notifications a::before,
li.menu-item.menu-item-sales a::before {  
    content: '';
    /* позиционируем по центру */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* размер иконок */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* ширина и высота псевдоэлемента */
    display: block;
    width: 35px;
    height: 35px;
   }

li.menu-item.menu-item-tasks a::before {  
    content: '';
    /* позиционируем по центру */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* размер иконок */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* ширина и высота псевдоэлемента */
    display: block;
    width: 35px;
    height: 35px;
}

li.menu-item.menu-item-chatium a::before {  
    content: '';
    /* позиционируем по центру */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* размер иконок */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* ширина и высота псевдоэлемента */
    display: block;
    width: 35px;
    height: 35px;
}

/* Разделы с иконками - задаем ссылки на новые иконки через псевдоэлемент */
li.menu-item-notifications_button_small a::before {background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/914160/sc/298/h/c3c7bb4b894e3ed24e2fafd1884c2936.png');}
li.menu-item.menu-item-cms a::before {background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/914160/sc/349/h/2e9db7c1198f7c9806bd8eae2be3de14.png');}
li.menu-item.menu-item-teach a::before {background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/914160/sc/219/h/6c7c2ca9569555c678b86b7ea3b2a9e9.png');}
li.menu-item.menu-item-user a::before {background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/914160/sc/77/h/77897ce8ebde0055163338896cd4292f.png');}
li.menu-item.menu-item-tasks a::before {background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/914160/sc/363/h/b12bfc4ff4cd2013b3b8b3fc227bac66.png');}
li.menu-item.menu-item-notifications a::before {background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/914160/sc/275/h/5559df65946f92fcf6dcf805fd0b86e4.png');}
li.menu-item.menu-item-sales a::before {background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/914160/sc/26/h/85d4661a95de7e9a400a687967227e82.png');}
li.menu-item.menu-item-chatium a::before {background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/914160/sc/157/h/6413a395b6399c93bea509e3c5eb57d4.png');}

/* Раздел с иконками - икона профиля - скрываем системную аватарку (если не загружено фото профиля) */
.gc-account-user-menu li.menu-item-profile a img {
    display: none;
}

/* Раздел с иконками - иконка профиля - ставим свою аватарку взамен (если не загружено фото профиля) */
.gc-account-user-menu li.menu-item-profile a::before {
    content: '';
    /* позиционируем по центру */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* размер иконки */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* ширина и высота псевдоэлемента */
    display: block;
    width: 35px;
    height: 35px;
    background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/914160/sc/469/h/7210724489f608d1e563b40a23b694c9.png');
}

/* Раздел с иконками - иконка профиля (если загружено фото профиля) */
.gc-account-user-menu li.menu-item-profile a img:not([src="/public/img/default_profile_50.png"]) {
    position: relative;
    /* размещаем слоем ниже */
    z-index: 0;
    /* выравниваем посередине */
    display: block;
    margin: 0 auto;
}

/* Раздел с иконками - иконка профиля админа в режиме сублогина */
.sub-icon img.user-profile-image {
    /* радиус скругления */
    border-radius: 8px;
    /* граница - обводка */
    border: 2px solid #d06d6d;
}

/* Раскрывающееся меню - подменю */
.gc-account-leftbar .gc-account-user-submenu-bar {
    /* фон подменю */
    background: #32604b;
    border-radius: 0px 30px 30px 0px;
    width: 220px;   
}

.gc-account-leftbar .gc-account-user-submenu-bar li.menu-item-delimiter a {
border-top: none!important;
}

/* Раскрывающееся меню - Заголовок подменю */
.gc-account-user-submenu-bar h3 {
    /* размер шрифта */
    font-size: 35px;
    /* толщина написания */
    font-weight: 500;
    /* цвет текста */
    color: #facc53;
    /* нижнее подчеркивание */
    border-bottom: 2px solid #facc53;
    /* внутренние отступы */
    padding-bottom: 20px;
    padding-left: 20px;
    /* внешние отступы */
    margin-top: 30px;
    margin-bottom: 10px;
}

/* Раскрывающееся меню - разделы */
.gc-account-user-submenu-bar .gc-account-user-submenu li a {
    /* размер шрифта */
    font-size: 20px;
    /* толщина шрифта */
    font-weight: 400;
    /* каждое слово с заглавной буквы */
    text-transform: capitalize;
    /* цвет текста */
    color: #dddad3;
    transition: all 0.3s;
}

/* Раскрывающееся меню - наведение на разделы */
.gc-account-user-submenu-bar .gc-account-user-submenu li a:hover {
    background: #db475e;
    /* цвет текста */
    border-radius: 30px 30px 30px 30px;
}

/* Cчетчик уведомлений - раздел Уведомления - рупор */
.gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small .notify-count {
    z-index: 2;
    /* размер шрифта */
    font-size: 10px!important;
    /* толщина написания */
    font-weight: 700;
    /* выравнивание по центру */
    text-align: center;
    /* цвет текста уведомлений */
    color: #dddad3;
    /* цвет фона уведомлений */
    background: #db475e;
    /* скругление границы фона */
    border-radius: 6px;
    /* позиционирование */
    position: absolute;
    bottom: 36px;
    right: 0px;
    /* позиционирование */
    padding: 5px 0px;
    width: 30px;
    height: 20px;
}

/* Счетчик уведомлений - разделы левой панели */
/* сообщения */
.gc-account-leftbar .gc-account-user-menu li.menu-item-notifications .notify-count,
/* обучение */
.gc-account-leftbar li.menu-item-teach .notify-count,
.gc-account-leftbar li.menu-item-tasks .notify-count,
/* покупки */
.gc-account-leftbar li.menu-item.menu-item-sales .notify-count {
    z-index: 2;
    /* размер шрифта */
    font-size: 10px!important;
    /* толщина написания */
    font-weight: 700;
    /* выравнивание по центру */
    text-align: center;
    /* цвет текста уведомлений */
    color: #dddad3;
    /* цвет фона уведомлений */
    background: #db475e;
    /* скругление границы фона */
    border-radius: 6px;
    /* позиционирование */
    position: absolute;
    bottom: 36px;
    right: 0px;
    /* внутренние отступы */
    padding: 5px 0px;
    width: 30px;
    height: 20px;
}

/* Счетчик уведомлений - раскрывающееся меню */
.gc-account-leftbar .gc-account-user-submenu li .notify-count {
    z-index: 2;
    /* толщина написания */
    font-weight: 700;
    /* выравнивание по центру */
    text-align: center;
    /* цвет текста уведомлений */
    color: #dddad3;
    /* цвет фона уведомлений */
    background: #db475e;
    /* скругление границы фона */
    border-radius: 6px;
    font-size: 10px!important;
    padding: 5px 0px;
     width: 30px;
    height: 20px; 
}

/* Раскрывающееся меню - Бонусные рубли, депозит и монеты */
.user-balance {
    /* цвет текста */
    color: #dddad3;
    /* внешние отступы */
    margin-top: 20px!important;
    margin-bottom: 10px;
}

/* Раскрывающееся меню - Раздел Уведомления */
.gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small {
    /* цвет фона */
    background: #32604b;
    width: 340px;
}

/* Раскрывающееся меню - Раздел Уведомления - заголовок */
.gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .header {
    background: #32604b;
    color: #dddad3;
    margin-top: 0;
    padding: 20px;
}

/* Раскрывающееся меню - Раздел Уведомления - уведомления */
.gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group {
    /* цвет фона */
    background: #f8dc94;
    /* цвет текста */
    color: #37322e;
    transition: all 0.3s;
}

.gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group:hover {
 /* цвет фона */
    background: #e06a7c;
    /* цвет текста */
    color: #dddad3;
}

/* Раскрывающееся меню - Раздел Уведомления - прочитанное уведомление */
.gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group.notification-status-viewed {
    /* цвет фона */
    background-color: #c9c1b7;
    /* цвет текста */
    color: #010101;
    transition: all 0.3s;
}

.gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group.notification-status-viewed:hover {
/* цвет фона */
    background-color: #e06a7c;
    /* цвет текста */
    color: #dddad3;
}

/* Боковая панель - Увеличиваем ширину - начало */
.gc-account-leftbar {
    /* увеличиваем ширину */
    width: 90px!important;
}
.gc-main-content.with-left-menu {    
    /* увеличиваем отступ слева */
    margin-left: 90px;
}

.gc-account-leftbar .gc-account-user-submenu-bar {
    /* сдвигаем от левого края */
    left: 90px;
}

.gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .all-notifications-footer-link {
border-bottom: none;
}

/* Мобильная адаптация */
@media (max-width: 768px) {
     /* Боковая панель */
.gc-account-leftbar.expanded,
.gc-account-leftbar {
        /* фон меню */
background: #0c3c2f;
    }
   
    /* Нижняя плашка меню */ 
.gc-account-leftbar .toggle-link {
        /* фон */ 
background: #0c3c2f;
    }
    /* Надпись Действие */     
.gc-page-nav-items-menu a {
        /* цвет текста */ 
color: #dddad3;
        /* фон */ 
background: #0c3c2f;
    }
}

@media (max-width: 289px) {
 /* Подменю */
    .gc-account-leftbar .gc-account-user-submenu-bar {
        /* фон подменю */
        background: #32604b;
    }  
}

@media (max-width: 768px) {
    .gc-account-leftbar .gc-account-user-menu {
        width: 90px;
    }
    .gc-account-leftbar:not(.expanded) {
        width: 100%!important;
    }
}

@media (max-width: 380px) {
    /* Раздел уведомления делаем уже */
    .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small {
        width: 220px;
}
}
@media (max-width: 460px) {
    /* Заголовок подменю */
    .gc-account-user-submenu-bar h3 {
        font-size: 20px!important;
    }
    /* Разделы в раскрывающемся меню */
    .gc-account-user-submenu-bar .gc-account-user-submenu li a {
         font-size: 14px!important;
    }
    .gc-account-leftbar .gc-account-user-submenu-bar {
    width: 200px;   
}
}